<template>
  <div class='app-container'>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="专业代码" >
        <el-input
          v-model="queryParams.subjectCode"
          placeholder="请输入专业代码"
          clearable
          size="small"
          style="width: 180px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="专业名称" >
        <el-input
          v-model="queryParams.subjectName"
          placeholder="请输入专业名称"
          clearable
          size="small"
          style="width: 180px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="是否启用" >
        <el-select
          v-model="queryParams.status"
          placeholder="是否启用"
          clearable
          size="small"
          style="width: 180px">
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增专业</el-button>
        </el-col>
      </el-row>
      
    <el-table class="form" :data="tableData" v-loading="loading">
      <el-table-column prop="subjectCode" label="专业代码" align="center" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="subjectName" label="专业名称" align="center" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="deptName" label="所属部门" align="center" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="subjectYear" label="修读年限" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.subjectYear || 0}} 年
        </template>
      </el-table-column>
      <el-table-column prop="subjectAmount" label="专业学费" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.subjectAmount || '0' }}
        </template>
      </el-table-column>
      
      <el-table-column prop="beginDate" label="建立年月" align="center" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="status" label="是否启用" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==1" type="success">是</el-tag>
          <el-tag v-if="scope.row.status==0" type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isRecruit" label="是否招生" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isRecruit==1" type="success">是</el-tag>
          <el-tag v-if="scope.row.isRecruit==0" type="info">否</el-tag>
        </template>
        
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{parseTime(scope.row.createTime)}}
        </template>
      </el-table-column>


      <el-table-column prop="address" label="操作" align="center" width="180">
        <template slot-scope="scope">

          <el-button class="editor" type="success" icon="el-icon-edit" size="mini" circle
            @click="handleEdit(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="handleDelete(scope.row)">
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 新增 -->
    <el-dialog title="专业管理" :visible.sync="dialogVisible" width="30%" >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
        <el-form-item label="专业部门"  prop="name">
          <treeselect v-model="ruleForm.deptId" :options="deptOptions" placeholder="请选择部门"  @select="selectDepart" />
          </el-form-item>
        <el-form-item label="专业代码" prop="subjectCode">
          <el-input v-model="ruleForm.subjectCode"></el-input>
        </el-form-item>
        <el-form-item label="专业名称"  prop="subjectName">
          <el-input v-model="ruleForm.subjectName"></el-input>
        </el-form-item>

        <el-form-item label="专业科目" prop="subjectIds">
          <el-select
            v-model="ruleForm.subjectIds" multiple collapse-tags placeholder="请选择专业科目">
            <el-option
              v-for="item in subjOption"
              :key="item.id"
              :label="item.subjName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="建立年月" prop="beginDate">
          <el-date-picker v-model="ruleForm.beginDate" value-format="yyyy-MM-dd" type="date" >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="ruleForm.status" label="1">启用</el-radio>
          <el-radio v-model="ruleForm.status" label="0">停用</el-radio>
        </el-form-item>
        <el-form-item label="是否招生" >
          <el-radio v-model="ruleForm.isRecruit" label="1">是</el-radio>
          <el-radio v-model="ruleForm.isRecruit" label="0">否</el-radio>
        </el-form-item>
          <el-form-item label="专业修读年限"  prop="subjectYear">
            <el-input-number v-model="ruleForm.subjectYear"  :min="1" :max="10" ></el-input-number>
          </el-form-item>
          <el-form-item label="专业学费"  prop="subjectAmount">
            <el-input  placeholder="请输入内容" v-model="ruleForm.subjectAmount" type="number" clearable >
              <template slot="append">￥</template>
            </el-input>

          </el-form-item>
          <el-form-item label="专业负责人"  prop="name">
            <el-select v-model="ruleForm.userList" multiple filterable remote style="width:100%"
              reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username">
                </el-option>
              </el-select>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao()">取 消</el-button>
        <el-button type="primary" @click="submitSubject">确 定</el-button>
      </span>
    </el-dialog>



  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { findBaseSubjectPageList,addOrUpdateSubject,deleteBaseSubject,findUserList,getMajorAllSubj } from "@/api/baseData/profession";
import { getSubjectList } from "@/api/educational/subject.js";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { Treeselect },
  data() {
    // 这里存放数据
    return {
      loading:false,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      tableData: [],
      total:0,
      userList:[],
      ruleForm: {
        subjectCode: '',//专业代码
        professionalName: '',//专业名称
        englishName: '',//专业英文名称 
        dateoFestablishment: '',//建立年月
        status: 1,//状态
        professionalCategory: '',//专业类别
        professionalAbbreviation: '',//专业简称
        subjectYear: 1,//专业修读年限
        userList:[]
      },
      queryParams:{
        pageSize:10,
        pageNum:1
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入专业名称', trigger: 'blur' },
        ],
        subjectCode: [
          { required: true, message: '请输入专业代码', trigger: 'blur' },
        ],
        professionalCategory: [
          { required: true, message: '请输入专业类别', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        subjectYear: [
          { required: true, message: '请输入年限', trigger: 'blur' },
        ],
        subjectAmount:[
          { required: true, message: '请输入专业学费', trigger: 'blur' },
        ],
        subjectIds:[
          { required: true, message: '请输入专业科目', trigger: 'blur' },
        ]
      },
      deptOptions:[],
      loading:false,
      subjOption:[]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    resetQuery(){
      this.queryParams={
        pageSize:10,
        pageNum:1
      }
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询班级列表 */
    getList() {
      this.loading = true;
      findBaseSubjectPageList(this.queryParams).then(response => {
          this.tableData = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
     /** 新增按钮操作 */
     handleAdd() {
      this.reset();
      this.dialogVisible = true;

    },
    handleEdit(row){
      this.dialogVisible = true;
      this.ruleForm = JSON.parse(JSON.stringify(row))
      getMajorAllSubj(row.id).then(resp => {
        if(resp.data){
          this.ruleForm.subjectIds = []
          resp.data.forEach(item => {
            this.ruleForm.subjectIds.push(item.subjectId)
          });
        }
      })

      this.ruleForm.userList = this.ruleForm.responsibleUser.split(",")
    },
    submitSubject() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.ruleForm.responsibleUser = this.ruleForm.userList.join(',')
          addOrUpdateSubject(this.ruleForm).then(resp=>{
            this.msgSuccess("提交成功");
            this.dialogVisible = false;
            this.getList()
          })
        } 
      });
    },
    reset() {
      this.ruleForm = {
        subjectCode: '',//专业代码
        professionalName: '',//专业名称
        englishName: '',//专业英文名称 
        dateoFestablishment: '',//建立年月
        status: '1',//状态
        professionalCategory: '',//专业类别
        professionalAbbreviation: '',//专业简称
        subjectYear: 1,//专业修读年限
        userList:[]
      };
      this.resetForm("form");
    },
    update(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {

          this.dialogVisible3 = false;
          this.ruleForm = { brand_right: 0 }
          this.$refs.ruleForm.resetFields();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    quxiao() {
      this.dialogVisible = false;
      this.ruleForm = { brand_right: 0 }
      this.$refs.ruleForm.resetFields();
    },
    quxiao2() {
      this.dialogVisible3 = false;
      this.ruleForm = { brand_right: 0 }
      this.$refs.ruleForm.resetFields();
    },
    cha() {
      this.ruleForm = { brand_right: 0 }
      this.$refs.ruleForm.resetFields();
    },
    // 获取当前选中部门的名称
    selectDepart(val) {
      this.ruleForm.deptName = val.label
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    remoteMethod(key){
      const param ={
        pageSize:10,
        pageNum:1,
        username:key
      }
      findUserList(param).then(response=>{
          this.userList = response.data.list;

      })

    },
    handleDelete(row){
      this.$confirm('确认要删除这个专业吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            const param = {ids:[row.id]}
            return deleteBaseSubject([row.id]);
          }).then(() => {
            this.getList()
            this.msgSuccess("删除成功");
           
          }).catch(function() {
            row.status = row.status === "0" ? "1" : "0";
          });
    },

    //获取所有科目
    getAllSubject(){
      getSubjectList().then(response => {
        this.subjOption = response.data;
      });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTreeselect()
    this.getList()
    this.getAllSubject()
  },

}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类

</style>
